<template>
  <div>
    <el-input
      style="width: 220px;margin-left: 20px"
      placeholder="请输入考勤发布名"
      v-model="searchByNameKeyword"
      prefix-icon="el-icon-search"

      clearable>
    </el-input>
    <el-button type="primary" plain @click="searchBtnClick">查询</el-button>
    <el-button type="success" plain @click="searchResetBtnClick">重置</el-button>
    <div style="margin: 20px 0;"></div>
    <!--更改签到状态弹框-->


    <!--考勤结果列表-->
    <el-table
      ref="multipleTable"
      border
      :data="signinTotalList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="50">

      </el-table-column>
      <el-table-column
        prop="date"
        label="序号"
        width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="lxCheckWorkName"
        label="考勤发布名"
        width="250">
      </el-table-column>
      <el-table-column
        prop="lxUsername"
        label="考勤发布人"
        width="95">
      </el-table-column>
      <el-table-column
        prop="lxClazzName"
        label="班级" width="300">
      </el-table-column>
      <el-table-column
        prop="totalNum"
        label="总人数" width="70">
      </el-table-column>
      <el-table-column
        prop="signinNum"
        label="签到人数" width="80">
      </el-table-column>
      <el-table-column
        prop="lateNum"
        label="迟到人数">
      </el-table-column>
      <el-table-column
        prop="leaveNum"
        label="请假人数">
      </el-table-column>
      <el-table-column
        prop="absenceNum"
        label="缺勤人数">
      </el-table-column>

      <el-table-column
        label="操作"
        width="105">
        <template slot-scope="scope">
          <router-link :to="{ name: '/checkwork/checkworkResult', params: { lxCheckworkId: scope.row.id }}">
            <el-button  type="warning" size="small">查看详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom" style="margin-bottom: 0;margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="currentPage"
        :page-sizes="[8, 10, 20, 40]"
        :page-size="pagesize"
        :background='true'
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" class="pageControl">
      </el-pagination>
    </div>

  </div>

</template>

<script>
export default {
  name: "CheckWorkResult",
  data(){
    return{
      currentPage:1,
      pagesize:8,
      total:0,
      pageNum:1,
      lxCheckworkId: '',
      searchByNameKeyword:'',
      search:false,
      signinTotalList:[
        // {
        //   id:'',
        //   lxCheckWorkName:'',
        //   lxUsername:'',
        //   lxClazzName:'',
        //   totalNum:'',
        //   signinNum:'',
        //   lateNum:'',
        //   leaveNum:'',
        //   absenceNum:''
        // }
      ],



    }
  },
  mounted() {
    this.$emit('getMessage', ["考勤管理","考勤结果统计"]);
    this.load()
  },
  methods:{
    load(){
      var userid=sessionStorage.getItem("LoginName");
      if(this.search){
        console.log("queryBykey")
        this.searchBtnClick()
      }else {
        console.log("queryAll")
        this.$http.get('/signin/queryAllSignStatisticsPage',{params:{currentPage:this.currentPage,pagesize:this.pagesize,lxUserId:userid}}).then(res=>{
          console.log("this.currentPage",this.currentPage)
          this.signinTotalList=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("/signin/queryAllSignPage",res)
          console.log("this.signinTotalList",this.signinTotalList)

        });
      }

    },
    handleSizeChange:function(size){
      //选择 一页展示多少数据时 调用的方法
      this.pagesize = size;
      console.log(size+"****");
      this.currentPage=1;
      this.load()
    },
    handleCurrentPageChange:function(currentPage){
      //点击页面项 的函数响应
      this.currentPage = currentPage;
      console.log("this.currentPage = currentPage;",this.currentPage)
      this.load()
    },
    searchBtnClick(){ //根据条件查询
      console.log("searchBtnClisk",this.searchByNameKeyword)
      this.search=true;
      if (this.searchByNameKeyword!=''){
        console.log("searchBtnClisk queryByKeyword")
        this.$http.get('/signin/querySignKeywordPage',{params:{currentPage:this.currentPage,pagesize:this.pagesize,keyword:this.searchByNameKeyword}}).then(res => {
          this.signinTotalList=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("res", res)
          console.log("this.signinTotalList", this.signinTotalList)
        });

      }else{
        console.log("searchBtnClisk is null")
      }

    },searchResetBtnClick(){  //重置搜索条件
      this.searchByTeacherId=''
      this.searchByNameKeyword="";
      this.currentPage=1
      this.load()
    },
    submitForm(signForm) {  //添加/更新表单
      this.$refs[signForm].validate((valid) => {
        if (valid) {
          console.log("signForm",this.signForm);
          this.$http.get('/signin/updateSignStatus',{params:{id:this.signForm.id,lxSignInStatus:this.signForm.lxSignInStatus}}).then(res=>{
            console.log("/signin/updateSignStatus res",res)
            if (res.data.state==200){
              this.$refs[signForm].resetFields();
              setTimeout(this.$message({
                message: '操作成功',
                type: 'success'
              }),1000)

            }else {
              this.$message.error('操作失败');
            }
            this.load();
          });
          this.closeDialog()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(signForm) {
      this.$refs[signForm].resetFields();
      this.closeDialog()
    },
    closeDialog(){
      this.signForm.id=''
      this.signForm.lxSignInStatus=''
      this.centerDialogVisible=false
    },
    handleEditStatusClick(rows){
      console.log("handleEditStatusClick rows",rows);
      this.signForm.id=rows.id;
      this.centerDialogVisible=true;
    },
    handleDeleteClick(rows){  //根据id删除教师
      console.log("delete rows",rows);
      var id=rows.id
      this.$confirm('此操作将永久删除该条签到记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("postid",id)
        this.$http.post('/checkwork/deleteCheckwork',id).then(res=>{
          console.log("res",res)
          this.load()
          if (res.data.state==200){ //成功删除弹窗
            setTimeout(this.$message({
              type: 'success',
              message: '删除成功!'
            }),1000)
          }else {
            this.$message.error('删除失败！');
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },




  },
}
</script>

<style scoped>

</style>
